<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>nodes 节点 - itxst.com</title>
    <meta name="keywords" content="nodes 节点" />
    <meta name="description" content="如果将编辑器document文档比喻成一棵树tree，那么nodes节点就是树中的一种内容,paragraphs、headings或code blocks都是节点.，但节点不一定是块。它们也可以与文本内联呈现，例如@mentions 扩展。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/363qzvqv.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>nodes 节点</h1>
               
               <p class="p">如果将编辑器<b>document文档</b>比喻成一棵<b>树tree</b>，那么<b>nodes</b>节点就是树中的一种内容,<b>paragraphs</b>、<b>headings</b>或<b>code blocks</b>都是节点.，但节点不一定是块。它们也可以与文本内联呈现，例如@mentions 扩展。</p><h2>创建新节点</h2><p>您可以方便地为<b>Tiptap</b>创建自己的<b>Node节点</b>,下面是创建和注册的节点所需的例子代码。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  // Your code here
})

const editor = new Editor({
  extensions: [
    // Register your custom node with the editor.
    CustomNode,
    // … and don’t forget all other extensions.
    Document,
    Paragraph,
    Text,
    // …
  ],
})</code></pre><p><br/></p>
                  <h2>Blockquote 引用扩展</h2>
                    <p class="p">本文讲解的Blockquote扩展够在tiptap编辑器中使用html的blockquote标签，在新行开头输入箭头，它将神奇地转换为blockquote标签。 </p><a href="/tiptap/blockquote.html" title="tiptap Blockquote 引用扩展">点击访问>></a>
                  <h2>BulletList 无序序列扩展</h2>
                    <p class="p">tiptap BulletList 扩展可以在编辑器中使用符号列表，它们被呈现为 HTML的 ul 标记。 </p><a href="/tiptap/avmrbq6f.html" title="tiptap BulletList 无序序列扩展">点击访问>></a>
                  <h2>CodeBlock 代码块扩展</h2>
                    <p class="p">使用 CodeBlock 代码块扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 pre 和code 标签中。 </p><a href="/tiptap/mrmuzbin.html" title="tiptap CodeBlock 代码块扩展">点击访问>></a>
                  <h2>CodeBlockLowlight 代码高亮</h2>
                    <p class="p">使用 CodeBlockLowlight  代码高亮扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 pre 和code 标签中，并且可以让代码高亮。 </p><a href="/tiptap/ibyqqqzj.html" title="tiptap CodeBlockLowlight 代码高亮">点击访问>></a>
                  <h2>Document 节点</h2>
                    <p class="p">Document 是 tiptap 编辑器的根节点，任何节点都在该节点下面，就像 html 的 body 标签。 </p><a href="/tiptap/effvybzr.html" title="tiptap Document 节点">点击访问>></a>
                  <h2>HardBreak 换行节点</h2>
                    <p class="p">HardBreak 节点功能相当于 html 里面的 br 标签。 </p><a href="/tiptap/qnv3uzam.html" title="tiptap HardBreak 换行节点">点击访问>></a>
                  <h2>Heading 标题节点</h2>
                    <p class="p">Heading 节点功能相当于 html 里面的 h1 h2 h3 h4 h5 h6标签，承担文档的标题作用。 </p><a href="/tiptap/yvymznqu.html" title="tiptap Heading 标题节点">点击访问>></a>
                  <h2>HorizontalRule 横线节点</h2>
                    <p class="p">tiptap 的 HorizontalRule 节点扩展功能相当于 html 里面的 hr标签，将光标所在的内容用横线分隔。 </p><a href="/tiptap/eqbzrb7r.html" title="tiptap HorizontalRule 横线节点">点击访问>></a>
                  <h2>Image 图片扩展</h2>
                    <p class="p">tiptap Image 是用来显示图片用的扩展，默认把图片渲染为block块元素，如果你要内联模式可以把 inline 属性设置为true，内联模式就是图片和文字可以在同一行。 </p><a href="/tiptap/z77rauyz.html" title="tiptap Image 图片扩展">点击访问>></a>
                  <h2>ListItem 节点</h2>
                    <p class="p">ListItem 扩展增加了对 HTML的li标签的支持，它用于项目列表和有序列表，ListItem扩展需要BulletList或OrderedList节点。 </p><a href="/tiptap/bqjemyb3.html" title="tiptap ListItem 节点">点击访问>></a>
                  <h2>Mention 提及节点</h2>
                    <p class="p">tiptap Mention 提及节点可以实现像聊天软件的@某人一样的功能，你可以通过前端实现数据筛选也可以调用后端api返回需要的数据。 </p><a href="/tiptap/nnzya3qj.html" title="tiptap Mention 提及节点">点击访问>></a>
                  <h2>OrderedList 有序列节点</h2>
                    <p class="p">tiptap OrderedList 有序列扩展渲染成功 html 的 ol 标签在每行的前面会显示数字。 </p><a href="/tiptap/3uqmeazz.html" title="tiptap OrderedList 有序列节点">点击访问>></a>
                  <h2>Paragraph 段落节点</h2>
                    <p class="p">tiptap Paragraph 扩展，把数据渲染成 html 的 p 标签，这很重要是文档的基础组成部分。 </p><a href="/tiptap/iyryuqn6.html" title="tiptap Paragraph 段落节点">点击访问>></a>
                  <h2>Table 表格扩展</h2>
                    <p class="p">如果你想在 tiptap 编辑器设置显示表格，你可以是使用 table 扩展，它可以渲染成 html 的 table 标签，他可以合并单元格、添加删除行等等。 </p><a href="/tiptap/mv67fbzr.html" title="tiptap Table 表格扩展">点击访问>></a>
                  <h2>TaskList 任务列表</h2>
                    <p class="p">tiptap TaskList 扩展可以在编辑器中使用任务列表，它们渲染成为 ul 的 data-type=&quot;taskList&quot; 标签，它不依赖任何框架，在新行开头键入[]或[x]，它将神奇地转换为任务列表。 </p><a href="/tiptap/bfmjvvbz.html" title="tiptap TaskList 任务列表扩展">点击访问>></a>
                  <h2>TaskItem 任务列表项</h2>
                    <p class="p">tiptap TaskItem 是 TaskList的列表项，可以呈现为选中或不选中状态。 </p><a href="/tiptap/zqi7fvzf.html" title="tiptap TaskItem 任务列表项扩展">点击访问>></a>
                  <h2>Text 节点</h2>
                    <p class="p">tiptap Text 节点是编辑器文档的必要节点，它不会渲染成如何 html 标签，纯粹是文本。 </p><a href="/tiptap/ffffui3e.html" title="tiptap Text 节点">点击访问>></a>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="2" class="leve-2     curr-dir arrow-2" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/blockquote.html" title="tiptap Blockquote 引用扩展">Blockquote 引用扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/avmrbq6f.html" title="tiptap BulletList 无序序列扩展">BulletList 无序序列扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mrmuzbin.html" title="tiptap CodeBlock 代码块扩展">CodeBlock 代码块扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ibyqqqzj.html" title="tiptap CodeBlockLowlight 代码高亮">CodeBlockLowlight 代码高亮</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/effvybzr.html" title="tiptap Document 节点">Document 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/qnv3uzam.html" title="tiptap HardBreak 换行节点">HardBreak 换行节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/yvymznqu.html" title="tiptap Heading 标题节点">Heading 标题节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/eqbzrb7r.html" title="tiptap HorizontalRule 横线节点">HorizontalRule 横线节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/z77rauyz.html" title="tiptap Image 图片扩展">Image 图片扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/bqjemyb3.html" title="tiptap ListItem 节点">ListItem 节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/nnzya3qj.html" title="tiptap Mention 提及节点">Mention 提及节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/3uqmeazz.html" title="tiptap OrderedList 有序列节点">OrderedList 有序列节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/iyryuqn6.html" title="tiptap Paragraph 段落节点">Paragraph 段落节点</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/mv67fbzr.html" title="tiptap Table 表格扩展">Table 表格扩展</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/bfmjvvbz.html" title="tiptap TaskList 任务列表扩展">TaskList 任务列表</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/zqi7fvzf.html" title="tiptap TaskItem 任务列表项扩展">TaskItem 任务列表项</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ffffui3e.html" title="tiptap Text 节点">Text 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
